[iOS 10] iOS 10のUIキットをダウンロードしてみた ― UI.Sketch編

[iOS 10] iOS 10のUIキットをダウンロードしてみた ― UI.Sketch編

Clock Icon2016.09.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、デザイナーの宮嶋です。
今回はSketch対応のUIキット「iOS 10 UI Kit」から、どのようなUIになるのか全体的にざっくりと見てみました。

UI.Sketch

スクリーンショット-2016-08-15-11.43.38

「UI.Sketch」には、ステータスバー、通知、ウィジェットやコントロールセンター、そして3D Touchなど、iOS 10で変更される要素が入っています。
また、全体的なデザインとして、従来のきっちりしたバーで分けられた画面とは違い、角丸のカードに変更されているのがわかります。

ウィジェット

widgets      iPhone 6 + Copy

どこがどう変わったのかわかりやすいように、iOS 9のUIと一緒に並べてみました。左が iOS 10、右が iOS 9です。

iOS 9ではホーム画面を右にスワイプするとSpotlightが開き、そこにウィジェット一覧が出てくるだけなんですよね。
ところが、iOS 10はウィジェットがドロップダウンで表示されるようです。また、好きな順に並べ替えたり、使わないものは外したりなどできるようになるそうなので、今までよりも活用しやすくなりそうですね!

コントロールセンター

     Control Center - Podcast and Audiobook Controls

左がiOS 10、右がiOS 9です。
コントロールセンターもこの通り、かなり変わります。
角丸になるだけでなく、オーディオが別のカードに分けられるようになります。

アイコン

  Control Centre  Misc

Tab Bar・Control Center・Miscの3種類のアイコンが収録されています。
一見ほとんど変わったように見えないアイコンもありますが、目に見えて変化がわかるアイコンもありますね。
特にマップ機能も大幅に更新されるからか、Pinceptionアイコンが大きく見やすく変化しています。

Apple news icon

ニュースアプリのアイコンは、ここまで簡略化されています!他のウィジェットのアイコンもどう変わるのか気になります……。

UI.Sketchを見てみて

全体的に目を通して一番印象的なのは、やはりコンテンツがカード化されたところですよね。
iOS 9 のUIはスッキリして洗練された印象がありますが、固定されて無機質な雰囲気も感じるところがあるかなぁ……と 思うところも正直ありました。
今回、カード化されたことによって、より動的・直感的な雰囲気が感じられるようになったと思います。
また、実際にそのような操作も可能になったことで、ユーザーに近いUIの実現が近付きつつあると感じます!

次回はアプリのUIについて見ていきたいと思います。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.